<template>
    <el-dialog v-model="isShow" title="新增图片" draggable destroy-on-close append-to-body>
        <div class="flex_str_str itemSty">
            <div class="nameSty">图片名称:</div>
            <el-input v-model="params.name" class="itpSty"></el-input>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">图片类型:</div>
            <el-select placeholder="请选择图片类型" style="margin-right: 40px;width: 120px;" v-model="params.type"
                @change="changeStatus">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">排序:</div>
            <el-input v-model="params.sort" class="itpSty"></el-input>
        </div>

        <div class="flex_str_str itemSty">
            <div class="nameSty">链接地址:</div>
            <el-input v-model="params.linkUrl" class="itpSty"></el-input>
        </div>
        <div class="flex_str_str itemSty">
            <div class="nameSty">上传图片:</div>
            <el-upload v-model:file-list="fileList" :http-request="updateImg"   action="" list-type="picture-card"
                :multiple="true" limit="1" :on-preview="handlePictureCardPreview" :on-remove="removeImg">
               
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitFun">
                    确定
                </el-button>
            </span>
        </template>
        <img :src="dialogImageUrl" :title="'点击关闭'" class="currentImgSty" v-if="dialogVisible" @click="dialogVisible = false"/>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { saveSwiperApi, updateFileApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import type { UploadUserFile} from 'element-plus'
import { ElLoading } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    }
})
const emit = defineEmits(['close'])
const { isShow } = toRefs(props)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([
])
const statusList = ref([
    {
        label: '首页轮播',
        value: 1
    },
    {
        label: '搜索轮播',
        value: 2
    }, {
        label: '赏金轮播',
        value: 3
    }
])
const params = reactive({
    name: '',
    type: '',
    drawingId: '',
    sort: '',
    linkUrl: '',
})
const handlePictureCardPreview = (uploadFile:any) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const cancel = () => {
    emit('close')
}
const removeImg = ()=>{
    params.drawingId = ''
}
const changeStatus = (num: any) => {
    params.type = num;
}
const submitFun = () => {
    if(params.drawingId == ''){
        ElMessage.warning('请上传图片')
        return
    }
    saveSwiperApi(params).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success(res.message)
            emit('close')
        }
    })
}
const updateImg = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        params.drawingId = res.data.fileId
    })
}

</script>
<style scoped>
.currentImgSty{
    position: fixed;
    top:10vh;
    left: 35vw;
    width: 30vw;
    
}
.textSty {
    width: 400px;
    height: 170px;
    resize: none;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.nameSty {
    width: 130px;
}

.itpSty {
    width: 300px;
}

.itemSty {
    margin: 10px 0;
}
</style>